import React, { Component } from 'react';
import styles from './index.less';
import { Table, Card } from 'antd';

const columns = [
  {
    title: 'Full Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Column 1',
    dataIndex: 'address',
    key: '1',
  },
  {
    title: 'Column 2',
    dataIndex: 'address',
    key: '2',
  },
  {
    title: 'Column 3',
    dataIndex: 'address',
    key: '3',
  },
  {
    title: 'Column 4',
    dataIndex: 'address',
    key: '4',
  },
  {
    title: 'Column 5',
    dataIndex: 'address',
    key: '5',
  },
  {
    title: 'Column 6',
    dataIndex: 'address',
    key: '6',
  },
  {
    title: 'Column 7',
    dataIndex: 'address',
    key: '7',
  },
  { title: 'Column 8', dataIndex: 'address', key: '8' },
  {
    title: 'Action',
    key: 'operation',
    render: () => <a>action</a>,
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: ['地址1', '地址222', '地址3333', '地址444'][Math.floor(Math.random() * 10) % 4],
  });
}

class FreezeTable extends Component {
  render() {
    return (
      <Card>
        <Table
          columns={columns}
          dataSource={data}
          scroll={{ 
            x: 1500, 
            y: 300 
          }}
          style={{
            width: 500,
          }}
        />
      </Card>
    );
  }
}

export default FreezeTable;
